<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>队伍上传材料情况</title>
  <link rel="stylesheet" href="css/main.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container">
  <!-- 顶部栏 -->
  <header class="header">
    <div class="header-content">
      <div class="system-title">
        <i class="fa fa-graduation-cap"></i>
        <span>母校行活动管理系统</span>
      </div>
      <div class="user-info">
        <span>QIANJIAXIN（招办管理员）</span>
        <a href="#" class="return-portal">
          <i class="fa fa-home"></i>
          <span>返回门户</span>
        </a>
      </div>
    </div>
  </header>

  <!-- 面包屑导航 -->
  <div class="breadcrumb">
    <a href="index.html">首页</a>
    <i class="fa fa-angle-right"></i>
    <span>队伍上传材料情况</span>
  </div>

  <!-- 主内容区 -->
  <div class="main-container">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <nav class="nav-menu">
        <a href="index.html" class="nav-item">
          <i class="fa fa-tasks"></i>
          <span>母校行队伍管理</span>
        </a>
        <a href="summary-review.html" class="nav-item">
          <i class="fa fa-check-square-o"></i>
          <span>母校行总结审核</span>
        </a>
        <a href="team-review.html" class="nav-item">
          <i class="fa fa-list-alt"></i>
          <span>母校行队伍审核</span>
        </a>
        <a href="material-status.html" class="nav-item active">
          <i class="fa fa-upload"></i>
          <span>队伍上传材料情况</span>
        </a>
        <a href="activity-batches.html" class="nav-item">
          <i class="fa fa-calendar"></i>
          <span>母校行活动批次</span>
        </a>
      </nav>
    </aside>

    <!-- 右侧内容 -->
    <main class="content">
      <div class="content-header">
        <h1>队伍上传材料情况</h1>
        <div class="action-buttons">
          <button class="btn btn-export">
            <i class="fa fa-download"></i>
            <span>导出数据</span>
          </button>
        </div>
      </div>

      <!-- 筛选区域 -->
      <div class="filter-panel">
        <div class="filter-item">
          <label>活动批次：</label>
          <select v-model="selectedBatch" class="form-select">
            <option value="">全部批次</option>
            <option value="autumn">母校行活动秋季批次</option>
            <option value="spring">母校行活动春季批次</option>
            <option value="summer">母校行活动夏季批次</option>
          </select>
        </div>
        <div class="filter-item">
          <label>材料状态：</label>
          <select v-model="materialStatus" class="form-select">
            <option value="">全部状态</option>
            <option value="complete">全部完成</option>
            <option value="incomplete">部分完成</option>
            <option value="none">未上传</option>
          </select>
        </div>
        <div class="filter-item">
          <label>队伍名称：</label>
          <input type="text" v-model="teamName" placeholder="请输入队伍名称" class="form-input">
        </div>
        <div class="filter-item">
          <button class="btn btn-search" @click="search">
            <i class="fa fa-search"></i>
            <span>搜索</span>
          </button>
          <button class="btn btn-reset" @click="resetFilter">
            <i class="fa fa-refresh"></i>
            <span>重置</span>
          </button>
        </div>
      </div>

      <!-- 材料情况列表 -->
      <div class="table-container">
        <table class="data-table">
          <thead>
          <tr>
            <th>序号</th>
            <th>队伍名称</th>
            <th>中学名称</th>
            <th>活动批次</th>
            <th>队长姓名</th>
            <th>材料完成情况</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(team, index) in filteredTeams" :key="team.id">
            <td>{{ index + 1 }}</td>
            <td>{{ team.name }}</td>
            <td>{{ team.schoolName }}</td>
            <td>{{ team.batch }}</td>
            <td>{{ team.leaderName }}</td>
            <td>
              <div class="progress-container">
                <div class="progress-bar" :style="{ width: team.completionRate + '%' }"></div>
                <span class="progress-text">{{ team.completionRate }}% ({{ team.completed }}/{{ team.total }})</span>
              </div>
              <div class="material-status-list">
                <div v-for="material in team.materials" :key="material.id" class="material-status-item">
                  <span class="material-name">{{ material.name }}:</span>
                  <span :class="getMaterialStatusClass(material.status)">{{ getMaterialStatusText(material.status) }}</span>
                </div>
              </div>
            </td>
            <td class="action-buttons">
              <button class="btn btn-view" @click="viewMaterials(team.id)">
                <i class="fa fa-eye"></i>
                <span>查看材料</span>
              </button>
              <button class="btn btn-remind" @click="remindUpload(team.id)">
                <i class="fa fa-bell"></i>
                <span>提醒上传</span>
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">
          <i class="fa fa-angle-left"></i>
        </button>
        <button v-for="page in totalPages" :key="page" class="page-btn" :class="{ active: page === currentPage }" @click="currentPage = page">
          {{ page }}
        </button>
        <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">
          <i class="fa fa-angle-right"></i>
        </button>
      </div>
    </main>
  </div>
</div>

<script src="js/material-status.js"></script>
</body>
</html>
